<!--
 * @Descripttion: 系统计划任务配置
 * @version: 1.2
 * @Author: sakuya
 * @Date: 2021年7月7日09:28:32
 * @LastEditors: sakuya
 * @LastEditTime: 2021年7月10日20:56:47
-->

<template>
  <el-container>
    <el-main>
      <el-tabs stretch class="demo-tabs" v-model="activeNames" @tab-click="tabClickHandle">
        <el-tab-pane class="tab-panel" label="知识库配置" name="setting"
          ><el-form :model="form" :rules="rules" ref="dialogForm" label-width="120px" label-position="left">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name" placeholder="名称" clearable></el-input>
            </el-form-item>

            <el-form-item label="模型" prop="model">
              <el-select v-model="form.model" filterable style="width: 100%" :allow-create="true">
                <el-option-group v-for="group in modelList" :key="group.code" :label="group.name">
                  <el-option v-for="item in group.models" :key="item" :label="item" :value="item" />
                </el-option-group>
              </el-select>
            </el-form-item>
            <el-form-item label="嵌入模型" prop="embeddingModel">
              <el-select v-model="form.embeddingModel" filterable style="width: 100%" :allow-create="true">
                <el-option-group v-for="group in modelList" :key="group.code" :label="group.name">
                  <el-option v-for="item in group.models" :key="item" :label="item" :value="item" />
                </el-option-group>
              </el-select>
            </el-form-item>
            <el-form-item label="向量数据库类型" prop="vectorType">
              <el-select v-model="form.vectorType" filterable style="width: 100%">
                <el-option v-for="item in vectorTypeList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="showSourceFile">
              <el-button type="warning" :loading="isSaveing" @click="submit()">保存修改</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane class="tab-panel" label="数据集" name="knowledgeData">
          <knowledgeDetail :wiki-Id="currentId" @upload="uploadEventHandle" ref="knowledgeDetail" style="width: 100%" />
        </el-tab-pane>
        <el-tab-pane class="tab-panel" label="搜素测试" name="search">
          <searchDetail ref="searchDetail" />
        </el-tab-pane>
        <el-tab-pane class="tab-panel" label="上传文件" name="uploadFile">
          <knowledgeUploadFileVue ref="knowledgeUploadFileVue" />
        </el-tab-pane>
        <el-tab-pane class="tab-panel" label="上传网页" name="uploadWeb">
          <knowledgeUploadWeb ref="knowledgeUploadWeb" />
        </el-tab-pane>
        <el-tab-pane class="tab-panel" label="上传数据" name="uploadData">
          <knowledgeUploadData ref="knowledgeUploadData" />
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

  <script>
import scCron from '@/components/scCron';
import knowledgeDetail from './components/knowledgeDetail';
import searchDetail from './components/searchDetail';
import knowledgeUploadFileVue from './components/knowledgeUploadFile';
import knowledgeUploadWeb from './components/knowledgeUploadWeb';
import knowledgeUploadData from './components/knowledgeUploadData';
export default {
  name: 'AIKnowledgenManageDetail',
  components: {
    scCron,
    knowledgeDetail,
    searchDetail,
    knowledgeUploadFileVue,
    knowledgeUploadWeb,
    knowledgeUploadData,
  },

  data() {
    return {
      activeNames: 'setting',
      form: {
        name: '',
        model: '',
        embeddingModel: '',
        vectorType: 'none',
      },
      modelList: [],
      vectorTypeList: [
        { label: 'mem0', value: 'mem0' },
        { label: '默认', value: 'none' },
      ],
      rules: {
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur',
          },
        ],
        model: [
          {
            required: true,
            message: '请选择模型',
            trigger: 'blur',
          },
        ],
        embeddingModel: [
          {
            required: true,
            message: '请选择嵌入模型',
            trigger: 'blur',
          },
        ],
      },

      isSaveing: false,
      currentId: '',
    };
  },
  async mounted() {
    this.currentId = this.$route.query.id;
    this.$refs.knowledgeDetail.setWiki(this.currentId);
    this.$refs.searchDetail.setWiki(this.currentId);
    this.loadDetail();
    this.$nextTick(() => {
      this.loadAIModels();
    });
  },
  methods: {
    uploadEventHandle(type) {
      if (type == 'file') {
        this.activeNames = 'uploadFile';
      }
      if (type == 'web') {
        this.activeNames = 'uploadWeb';
      }
      if (type == 'data') {
        this.activeNames = 'uploadData';
      }
      this.tabClickHandle();
    },
    tabClickHandle(val) {
      if (val && val.props) {
        this.activeNames = val.props.name;
      }

      if (this.activeNames === 'uploadFile') {
        this.$refs.knowledgeUploadFileVue.setWiki(this.currentId);
      }
      if (this.activeNames === 'uploadWeb') {
        this.$refs.knowledgeUploadWeb.setWiki(this.currentId);
      }
      if (this.activeNames === 'uploadData') {
        this.$refs.knowledgeUploadData.setWiki(this.currentId);
      }
      if (this.activeNames == 'knowledgeData') {
        this.$refs.knowledgeDetail.upsearch();
      }
    },
    handleChange() {},
    async loadAIModels() {
      let response = await this.$API.aiModel.list.get('');
      this.modelList = response.data;
    },

    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async valid => {
        if (valid) {
          this.isSaveing = true;
          var res = await this.$API.aiWiki.update.post(this.form);
          this.isSaveing = false;
          if (res.code == 200) {
            this.$emit('success');
            this.visible = false;
            this.$message.success('操作成功');
          } else {
            this.$alert(res.message, '提示', { type: 'error' });
          }
        }
      });
    },

    async loadDetail() {
      var res = await this.$API.aiWiki.detail.post(this.currentId);
      if (res.code == 200) {
        this.form = res.data;
        if (this.form.vectorType == null) {
          this.form.vectorType = 'none';
        }
      }
    },
  },
};
</script>

  <style lang="scss" scoped>
.tab-panel {
  /* height: 100%; */
  overflow-y: auto;
  overflow-x: hidden;
  height: 100% !important;
}
.slider-ai {
  width: 98% !important;
}
.margin-form-item {
  margin-top: 15px;
}
.demo-tabs {
  height: 100%;
}
:deep(.el-tabs__content) {
  height: calc(100% - 40px) !important;
}
</style>
